<%--
  Created by IntelliJ IDEA.
  User: lyy
  Date: 2022/9/20
  Time: 16:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<% String path = request.getContextPath();%>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<!doctype html>
<html lang="en" class="pxp-root">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="shortcut icon" href="/static/web/images/favicon.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap" rel="stylesheet">
    <link href="/static/web/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/web/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/static/web/css/animate.css">
    <link rel="stylesheet" href="/static/web/css/style.css">

    <title>万码招聘主页</title>
</head>
<body>
<div class="pxp-preloader"><span>Loading...</span></div>

<jsp:include page="/web/personal/inc/indexHead"></jsp:include>

<section class="pxp-hero vh-100" style="background-color: var(--pxpMainColorLight);">
    <div class="pxp-hero-caption">
        <div class="pxp-container">
            <div class="row pxp-pl-80 align-items-center justify-content-between">
                <div class="col-12 col-xl-6 col-xxl-5">
                    <h1>Find The Perfect<br><span style="color: var(--pxpMainColor);">Job</span> For You</h1>
                    <div class="pxp-hero-subtitle mt-3 mt-lg-4">通过 <strong> ${positionCount} </strong> 个职位搜索您的职业机会</div>

                    <div class="pxp-hero-form pxp-hero-form-round mt-3 mt-lg-4">
                        <form class="row gx-3 align-items-center" action="/web/personal/positionList">
                            <div class="col-12 col-sm">
                                <div class="mb-3 mb-sm-0">
                                    <input type="text" name="positionName" class="form-control" placeholder="职位、公司">
                                </div>
                            </div>
                            <div class="col-12 col-sm pxp-has-left-border">
                                <div class="mb-3 mb-sm-0">
                                    <input type="text" name="cityName" class="form-control" placeholder="工作地点">
                                </div>
                            </div>
                            <div class="col-12 col-sm-auto">
                                <button><span class="fa fa-search"></span></button>
                            </div>
                        </form>
                    </div>

                    <div class="pxp-hero-searches-container">
                        <div class="pxp-hero-searches-label">热门搜索</div>
                        <div class="pxp-hero-searches">
                            <div class="pxp-hero-searches-items">
                                <c:forEach items="${requestScope.hotSearchPageInfo.list}" var="hotSearch">
                                    <a href="/web/personal/positionList?positionName=${hotSearch.hotSearchName}">${hotSearch.hotSearchName}</a>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-none d-xl-block col-xl-5 position-relative">
                    <div class="pxp-hero-cards-container pxp-animate-cards pxp-mouse-move" data-speed="160">
                        <div class="pxp-hero-card pxp-cover pxp-cover-top" style="background-image: url(/static/web/images/wanmait.jpg);"></div>
                        <div class="pxp-hero-card-dark"></div>
                        <div class="pxp-hero-card-light"></div>
                    </div>

                    <div class="pxp-hero-card-info-container pxp-mouse-move" data-speed="60">
                        <div class="pxp-hero-card-info pxp-animate-bounce">
                            <c:forEach items="${requestScope.positionPageInfo.list}" var="position">
                                <div class="pxp-hero-card-info-item">
                                    <a href="/web/personal/positionDetail/${position.id}" class="top-job"><div class="pxp-hero-card-info-item-number"><span>${position.positionName}${position.name}</span></div></a>
                                    <div class="pxp-hero-card-info-item-description">${position.numberOfResumesDelivered} 位求职者感兴趣</div>
                                </div>
                            </c:forEach>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="pxp-hero-logos-carousel-container">
        <div class="pxp-container">
            <div class="row pxp-pl-80">
                <div class="col-12 col-xl-6">
                    <div class="pxp-hero-logos-carousel owl-carousel">
                        <img src="https://pixelprime.co/themes/jobster/images/hero-logo-1.svg" alt="Logo 1">
                        <img src="https://pixelprime.co/themes/jobster/images/hero-logo-2.svg" alt="Logo 2">
                        <img src="https://pixelprime.co/themes/jobster/images/hero-logo-3.svg" alt="Logo 3">
                        <img src="https://pixelprime.co/themes/jobster/images/hero-logo-4.svg" alt="Logo 4">
                        <img src="https://pixelprime.co/themes/jobster/images/hero-logo-5.svg" alt="Logo 5">
                        <img src="https://pixelprime.co/themes/jobster/images/hero-logo-6.svg" alt="Logo 6">
                        <img src="https://pixelprime.co/themes/jobster/images/hero-logo-7.svg" alt="Logo 7">
                        <img src="https://pixelprime.co/themes/jobster/images/hero-logo-1.svg" alt="Logo 8">
                        <img src="https://pixelprime.co/themes/jobster/images/hero-logo-2.svg" alt="Logo 9">
                        <img src="https://pixelprime.co/themes/jobster/images/hero-logo-3.svg" alt="Logo 10">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="pxp-hero-right-bg-card pxp-has-animation"></div>
</section>

<section class="mt-100">
    <div class="pxp-container">
        <h2 class="pxp-section-h2 text-center">按类别搜索</h2>
        <p class="pxp-text-light text-center">通过我们的类别搜索您的职业机会</p>

        <div class="row mt-4 mt-md-5 pxp-animate-in pxp-animate-in-top">
            <div class="col-12 col-md-4 col-lg-3 col-xxl-2 pxp-categories-card-1-container">
                <a href="/web/personal/positionList?positionTypeId=${positionTypes.list[0].id}" class="pxp-categories-card-1">
                    <div class="pxp-categories-card-1-icon-container">
                        <div class="pxp-categories-card-1-icon">
                            <span class="fa fa-pie-chart"></span>
                        </div>
                    </div>
                    <div class="pxp-categories-card-1-title">${positionTypes.list[0].typeName}</div>
                </a>
            </div>
            <div class="col-12 col-md-4 col-lg-3 col-xxl-2 pxp-categories-card-1-container">
                <a href="/web/personal/positionList?positionTypeId=${positionTypes.list[1].id}" class="pxp-categories-card-1">
                    <div class="pxp-categories-card-1-icon-container">
                        <div class="pxp-categories-card-1-icon">
                            <span class="fa fa-bullhorn"></span>
                        </div>
                    </div>
                    <div class="pxp-categories-card-1-title">${positionTypes.list[1].typeName}</div>
                </a>
            </div>
            <div class="col-12 col-md-4 col-lg-3 col-xxl-2 pxp-categories-card-1-container">
                <a href="/web/personal/positionList?positionTypeId=${positionTypes.list[2].id}" class="pxp-categories-card-1">
                    <div class="pxp-categories-card-1-icon-container">
                        <div class="pxp-categories-card-1-icon">
                            <span class="fa fa-address-card-o"></span>
                        </div>
                    </div>
                    <div class="pxp-categories-card-1-title">${positionTypes.list[2].typeName}</div>
                </a>
            </div>
            <div class="col-12 col-md-4 col-lg-3 col-xxl-2 pxp-categories-card-1-container">
                <a href="/web/personal/positionList?positionTypeId=${positionTypes.list[3].id}" class="pxp-categories-card-1">
                    <div class="pxp-categories-card-1-icon-container">
                        <div class="pxp-categories-card-1-icon">
                            <span class="fa fa-calendar-o"></span>
                        </div>
                    </div>
                    <div class="pxp-categories-card-1-title">${positionTypes.list[3].typeName}</div>
                </a>
            </div>
            <div class="col-12 col-md-4 col-lg-3 col-xxl-2 pxp-categories-card-1-container">
                <a href="/web/personal/positionList?positionTypeId=${positionTypes.list[4].id}" class="pxp-categories-card-1">
                    <div class="pxp-categories-card-1-icon-container">
                        <div class="pxp-categories-card-1-icon">
                            <span class="fa fa-comments-o"></span>
                        </div>
                    </div>
                    <div class="pxp-categories-card-1-title">${positionTypes.list[4].typeName}</div>
                </a>
            </div>
            <div class="col-12 col-md-4 col-lg-3 col-xxl-2 pxp-categories-card-1-container">
                <a href="/web/personal/positionList?positionTypeId=${positionTypes.list[5].id}" class="pxp-categories-card-1">
                    <div class="pxp-categories-card-1-icon-container">
                        <div class="pxp-categories-card-1-icon">
                            <span class="fa fa-terminal"></span>
                        </div>
                    </div>
                    <div class="pxp-categories-card-1-title">${positionTypes.list[5].typeName}</div>
                </a>
            </div>
        </div>

        <div class="mt-4 mt-md-5 text-center pxp-animate-in pxp-animate-in-top">
            <a href="/web/personal/positionList" class="btn rounded-pill pxp-section-cta">全 部 分 类<span class="fa fa-angle-right"></span></a>
        </div>
    </div>
</section>

<section class="mt-100 pt-100 pb-100" style="background-color: var(--pxpSecondaryColorLight);">
    <div class="pxp-container">
        <h2 class="pxp-section-h2 text-center">特色工作机会</h2>
        <p class="pxp-text-light text-center">通过 ${positionCount} 个职位搜索您的职业机会</p>

        <div class="row mt-4 mt-md-5 pxp-animate-in pxp-animate-in-top">

            <c:forEach items="${requestScope.positions}" var="position">
                <div class="col-md-6 col-xl-4 col-xxl-3 pxp-jobs-card-1-container" id="job">
                    <div class="pxp-jobs-card-1 pxp-has-shadow">
                        <div class="pxp-jobs-card-1-top">
                            <a href="#" class="pxp-jobs-card-1-category">
                                <div class="pxp-jobs-card-1-category-icon"><span class="fa fa-address-card-o"></span></div>
                                <div class="pxp-jobs-card-1-category-label">${position.positionTypeSecond.positionType.typeName} & ${position.positionTypeSecond.typeName}</div>
                            </a>
                            <a href="/web/personal/positionDetail/${position.id}" class="pxp-jobs-card-1-title">${position.positionName}</a>
                            <div class="pxp-jobs-card-1-details">
                                <a href="#" class="pxp-jobs-card-1-location">
                                    <span class="fa fa-globe"></span>${position.province.provName}-${position.city.cityName}
                                </a>
                                <c:if test="${position.fullTimeOn}" var="fullTime">
                                    <div class="pxp-jobs-card-1-type">全职</div>
                                </c:if>
                                <c:if test="${not fullTime}">
                                    <div class="pxp-jobs-card-1-type">兼职</div>
                                </c:if>
                            </div>
                        </div>
                        <div class="pxp-jobs-card-1-bottom">
                            <div class="pxp-jobs-card-1-bottom-left">
                                <div class="pxp-jobs-card-1-date pxp-text-light">发布时间：<fmt:formatDate value="${position.enrollTime}" pattern="yyyy-MM-dd"/> </div>
                                <a href="#" class="pxp-jobs-card-1-company">${position.company.name}</a>
                            </div>
                            <a id="job-logo" href="/web/personal/positionDetail/${position.id}" class="pxp-jobs-card-1-company-logo" style="background-image: url(/static/web/images/company-logo-7.png);"></a>
                        </div>
                    </div>
                </div>
            </c:forEach>

        </div>

        <div class="mt-4 mt-md-5 text-center pxp-animate-in pxp-animate-in-top">
            <a href="/web/personal/positionList" class="btn rounded-pill pxp-section-cta">其 他 工 作 机 会<span class="fa fa-angle-right"></span></a>
        </div>
    </div>
</section>

<section class="mt-100">
    <div class="pxp-container">
        <h2 class="pxp-section-h2 text-center">寻找知名企业</h2>
        <p class="pxp-text-light text-center">为世界上最好的公司工作</p>

        <div class="row mt-4 mt-md-5 pxp-animate-in pxp-animate-in-top">
            <c:forEach items="${requestScope.companies}" var="company">
                <div class="col-md-6 col-xl-4 col-xxl-3 pxp-companies-card-1-container">
                    <div class="pxp-companies-card-1 pxp-has-border">
                        <div class="pxp-companies-card-1-top">
                            <img src="/static/images/${company.face}" style="height: 80px;">
                            <a href="/web/personal/personalCompanyDetail/${company.id}" class="pxp-companies-card-1-company-name">${company.name}</a>
                            <div class="pxp-companies-card-1-company-description pxp-text-light" style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">${company.introduction}</div>
                        </div>
                        <div class="pxp-companies-card-1-bottom" style="text-align: right;">
                            <a href="#" class="pxp-companies-card-1-company-jobs">${company.positionCount}个职位在招</a>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>

        <div class="mt-4 mt-md-5 text-center pxp-animate-in pxp-animate-in-top">
            <a href="#" class="btn rounded-pill pxp-section-cta">所 有 公 司<span class="fa fa-angle-right"></span></a>
        </div>
    </div>
</section>

<section class="mt-100">
    <div class="pxp-container">
        <h2 class="pxp-section-h2 text-center">特色城市</h2>
        <p class="pxp-text-light text-center">在美丽的城市开启您的下一份事业</p>
        <div class="row mt-4 mt-md-5 pxp-animate-in pxp-animate-in-top">
            <div class="col-md-6 col-xl-4 col-xxl-3">
                <a href="/web/personal/positionList?cityName=${cities[0].cityName}" class="pxp-cities-card-2">
                    <div class="pxp-cities-card-2-image-container">
                        <div class="pxp-cities-card-2-image pxp-cover" style="background-image: url(/static/images/${cities[0].cityPic});"></div>
                    </div>
                    <div class="pxp-cities-card-2-info">
                        <div class="pxp-cities-card-2-name">${cities[0].cityName}--${cities[0].cityPy}</div>
                        <c:if test="${cities[0].positionCount > 9998}" var="maxPositionCount">
                            <div class="pxp-cities-card-2-jobs">9999+ 个职位在招</div>
                        </c:if>
                        <c:if test="${not maxPositionCount}">
                            <div class="pxp-cities-card-2-jobs">${cities[0].positionCount} 个职位在招</div>
                        </c:if>
                    </div>
                </a>
                <a href="/web/personal/positionList?cityName=${cities[1].cityName}" class="pxp-cities-card-2">
                    <div class="pxp-cities-card-2-image-container">
                        <div class="pxp-cities-card-2-image pxp-cover" style="background-image: url(/static/images/${cities[1].cityPic});"></div>
                    </div>
                    <div class="pxp-cities-card-2-info">
                        <div class="pxp-cities-card-2-name">${cities[1].cityName}--${cities[1].cityPy}</div>
                        <c:if test="${cities[1].positionCount > 9998}" var="maxPositionCount">
                            <div class="pxp-cities-card-2-jobs">9999+ 个职位在招</div>
                        </c:if>
                        <c:if test="${not maxPositionCount}">
                            <div class="pxp-cities-card-2-jobs">${cities[1].positionCount} 个职位在招</div>
                        </c:if>
                    </div>
                </a>
            </div>
            <div class="col-md-6 col-xl-4 col-xxl-3">
                <a href="/web/personal/positionList?cityName=${cities[2].cityName}" class="pxp-cities-card-2 pxp-is-featured">
                    <div class="pxp-cities-card-2-image-container">
                        <div class="pxp-cities-card-2-image pxp-cover" style="background-image: url(/static/images/${cities[2].cityPic});" style="border: black solid 1px; height: 500px;"></div>
                    </div>
                    <div class="pxp-cities-card-2-info">
                        <div class="pxp-cities-card-2-name">${cities[2].cityName}--${cities[2].cityPy}</div>
                        <c:if test="${cities[2].positionCount > 9998}" var="maxPositionCount">
                            <div class="pxp-cities-card-2-jobs">9999+ 个职位在招</div>
                        </c:if>
                        <c:if test="${not maxPositionCount}">
                            <div class="pxp-cities-card-2-jobs">${cities[2].positionCount} 个职位在招</div>
                        </c:if>
                    </div>
                </a>
            </div>
            <div class="col-md-6 col-xl-4 col-xxl-3">
                <a href="/web/personal/positionList?cityName=${cities[3].cityName}" class="pxp-cities-card-2">
                    <div class="pxp-cities-card-2-image-container">
                        <div class="pxp-cities-card-2-image pxp-cover" style="background-image: url(/static/images/${cities[3].cityPic});"></div>
                    </div>
                    <div class="pxp-cities-card-2-info">
                        <div class="pxp-cities-card-2-name">${cities[3].cityName}--${cities[3].cityPy}</div>
                        <c:if test="${cities[3].positionCount > 9998}" var="maxPositionCount">
                            <div class="pxp-cities-card-2-jobs">9999+ 个职位在招</div>
                        </c:if>
                        <c:if test="${not maxPositionCount}">
                            <div class="pxp-cities-card-2-jobs">${cities[3].positionCount} 个职位在招</div>
                        </c:if>
                    </div>
                </a>
                <a href="/web/personal/positionList?cityName=${cities[4].cityName}" class="pxp-cities-card-2">
                    <div class="pxp-cities-card-2-image-container">
                        <div class="pxp-cities-card-2-image pxp-cover" style="background-image: url(/static/images/${cities[4].cityPic});"></div>
                    </div>
                    <div class="pxp-cities-card-2-info">
                        <div class="pxp-cities-card-2-name">${cities[4].cityName}--${cities[4].cityPy}</div>
                        <c:if test="${cities[4].positionCount > 9998}" var="maxPositionCount">
                            <div class="pxp-cities-card-2-jobs">9999+ 个职位在招</div>
                        </c:if>
                        <c:if test="${not maxPositionCount}">
                            <div class="pxp-cities-card-2-jobs">${cities[4].positionCount} 个职位在招</div>
                        </c:if>
                    </div>
                </a>
            </div>
            <div class="col-md-6 col-xl-4 col-xxl-3">
                <a href="/web/personal/positionList?cityName=${cities[5].cityName}" class="pxp-cities-card-2">
                    <div class="pxp-cities-card-2-image-container">
                        <div class="pxp-cities-card-2-image pxp-cover" style="background-image: url(/static/images/${cities[5].cityPic});"></div>
                    </div>
                    <div class="pxp-cities-card-2-info">
                        <div class="pxp-cities-card-2-name">${cities[5].cityName}--${cities[5].cityPy}</div>
                        <c:if test="${cities[5].positionCount > 9998}" var="maxPositionCount">
                            <div class="pxp-cities-card-2-jobs">9999+ 个职位在招</div>
                        </c:if>
                        <c:if test="${not maxPositionCount}">
                            <div class="pxp-cities-card-2-jobs">${cities[5].positionCount} 个职位在招</div>
                        </c:if>
                    </div>
                </a>
                <a href="/web/personal/positionList?cityName=${cities[6].cityName}" class="pxp-cities-card-2">
                    <div class="pxp-cities-card-2-image-container">
                        <div class="pxp-cities-card-2-image pxp-cover" style="background-image: url(/static/images/${cities[6].cityPic});"></div>
                    </div>
                    <div class="pxp-cities-card-2-info">
                        <div class="pxp-cities-card-2-name">${cities[6].cityName}--${cities[6].cityPy}</div>
                        <c:if test="${cities[6].positionCount > 9998}" var="maxPositionCount">
                            <div class="pxp-cities-card-2-jobs">9999+ 个职位在招</div>
                        </c:if>
                        <c:if test="${not maxPositionCount}">
                            <div class="pxp-cities-card-2-jobs">${cities[6].positionCount} 个职位在招</div>
                        </c:if>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

<jsp:include page="/web/personal/inc/indexFoot"></jsp:include>

<script src="/static/web/js/jquery-3.4.1.min.js"></script>
<script src="/static/web/js/bootstrap.bundle.min.js"></script>
<script src="/static/web/js/owl.carousel.min.js"></script>
<script src="/static/web/js/nav.js"></script>
<script src="/static/web/js/main.js"></script>
</body>

<style type="text/css">
    #job-logo:hover{
        opacity: 0.8;
    }

    .top-job:hover{
        opacity: 0.8;
    }
</style>

</html>
